<template>
   <v-data-table
           :headers="headers"
           :items="desserts"
           sort-by="calories"
           class="elevation-1"
           :search="search"
           v-loading="loading"
   >
      <template v-slot:top>
         <v-toolbar
                 flat
         >
            <v-divider
                    class="mx-4"
                    inset
                    vertical
            ></v-divider>
            <v-spacer></v-spacer>
            <v-text-field
                    v-model="search"
                    append-icon="mdi-magnify"
                    label="搜索"
                    single-line
                    hide-details
            ></v-text-field>
            <v-dialog
                    v-model="dialog"
                    max-width="500px"
            >
               <v-card>
                  <v-card-title>
                     <span class="text-h5">{{ formTitle }}</span>
                  </v-card-title>

                  <v-card-text>
                     <v-container>
                        <v-row>
                           <v-col
                                   cols="12"
                                   sm="6"
                                   md="4"
                           >
                              <v-text-field
                                      v-model="editedItem.id"
                                      label="id"
                                      :disabled="true"
                              ></v-text-field>

                           </v-col>

                           <v-col
                                   cols="12"
                                   sm="6"
                                   md="4"
                           >
                              <v-text-field
                                      v-model="editedItem.userName"
                                      label="用户名"
                              ></v-text-field>
                           </v-col>
                           <v-col
                                   cols="12"
                                   sm="6"
                                   md="4"
                           >
                              <v-text-field
                                      v-model="editedItem.realName"
                                      label="昵称"
                              ></v-text-field>
                           </v-col>
                           <v-col
                                   cols="12"
                                   sm="6"
                                   md="4"
                           >
                              <v-text-field
                                      v-model="editedItem.email"
                                      label="邮件"
                              ></v-text-field>
                           </v-col>
                           <v-col
                                   cols="12"
                                   sm="6"
                                   md="4"
                           >
                              <v-text-field
                                      v-model="editedItem.phoneNumber"
                                      label="电话"
                              ></v-text-field>
                           </v-col>
                        </v-row>
                     </v-container>
                  </v-card-text>

                  <v-card-actions>
                     <v-spacer></v-spacer>
                     <v-btn
                             color="blue darken-1"
                             text
                             @click="close"
                     >
                        取消
                     </v-btn>
                     <v-btn
                             color="blue darken-1"
                             text
                             @click="save"
                     >
                        确定
                     </v-btn>
                  </v-card-actions>
               </v-card>
            </v-dialog>
            <v-dialog v-model="dialogDelete" max-width="500px">
               <v-card>
                  <v-card-title class="text-h5">你真的想删掉吗</v-card-title>
                  <v-card-actions>
                     <v-spacer></v-spacer>
                     <v-btn color="blue darken-1" text @click="closeDelete">取消</v-btn>
                     <v-btn color="blue darken-1" text @click="deleteItemConfirm">确定</v-btn>
                     <v-spacer></v-spacer>
                  </v-card-actions>
               </v-card>
            </v-dialog>
         </v-toolbar>
      </template>
      <template v-slot:item.actions="{ item }">
         <v-icon
                 small
                 class="mr-2"
                 @click="editItem(item)"
         >
            mdi-pencil
         </v-icon>
         <v-icon
                 small
                 @click="deleteItem(item)"
         >
            mdi-delete
         </v-icon>
      </template>
      <template v-slot:no-data>
         <v-btn
                 color="primary"
                 @click="initialize"
         >
            重置
         </v-btn>
      </template>
   </v-data-table>
</template>

<script>
   import * as user from '../../api/user'
  export default {
     data: () => ({
        dialog: false,
        dialogDelete: false,
        search: '',
        headers: [
           {
              text: 'id',
              align: 'start',
              sortable: true,
              value: 'id',
           },
           { text: '用户名', value: 'userName' },
           { text: '昵称', value: 'realName' },
           { text: '邮件', value: 'email' },
           { text: '电话', value: 'phoneNumber' },
           { text: '操作', value: 'actions', sortable: false },
        ],
        desserts: [],
        editedIndex: -1,
        loading: true,
        editedItem: {
           id: 0,
           userName: "",
           realName: "",
           email: "",
           phoneNumber: ""
        },
        defaultItem: {
           id: 0,
           userName: "",
           realName: "",
           email: "",
           phoneNumber: ""
        },
     }),

     computed: {
        formTitle () {
           return this.editedIndex === -1 ? '添加' : '编辑'
        },
     },

     watch: {
        dialog (val) {
           val || this.close()
        },
        dialogDelete (val) {
           val || this.closeDelete()
        },
        // eslint-disable-next-line no-unused-vars
        $route: {
           // eslint-disable-next-line no-unused-vars
           handler: function(val){
              this.initialize();
           }
        }
     },

     created () {
        this.initialize()
     },

     methods: {
        initialize () {
           this.loading=true;
           let that=this
           user.getUser().then(function (response) {
              that.desserts = response.data.data
           })
           this.loading=false

        },

        editItem (item) {
           this.editedIndex = this.desserts.indexOf(item)
           this.editedItem = Object.assign({}, item)
           this.dialog = true
        },

        deleteItem (item) {
           this.editedIndex = this.desserts.indexOf(item)
           this.editedItem = Object.assign({}, item)
           this.dialogDelete = true
        },

        async deleteItemConfirm () {
           let that =this
           await  user.deleteUser(this.editedItem).then(function (response) {
              console.log(response);
              that.$store.commit('updateUserCode',response.data.code)
           })
           if(this.$store.getters.getUser===200) {
              this.desserts.splice(this.editedIndex, 1)
           }
           this.closeDelete();

        },

        close () {
           this.dialog = false
           this.$nextTick(() => {
              this.editedItem = Object.assign({}, this.defaultItem)
              this.editedIndex = -1
           })

        },

        closeDelete () {
           this.dialogDelete = false
           this.$nextTick(() => {
              this.editedItem = Object.assign({}, this.defaultItem)
              this.editedIndex = -1
           })
        },

        async save () {
           let that = this
           if (this.editedIndex > -1) {
              await user.updateUser(this.editedItem).then(function (response) {
                 that.$store.commit('updateUserCode',response.data.code)
              })
              if(this.$store.getters.getUser===200) {
                 Object.assign(this.desserts[this.editedIndex], this.editedItem);
              }

           }
           this.close();

        },
     },
  }
</script>

<style scoped>

</style>
